<template>
  <div class="business">
    <el-card>
      <el-form :inline="true" :model="form">
        <el-form-item label="企业编号">
          <el-input v-model="form.eid"></el-input>
        </el-form-item>
        <el-form-item label="企业名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="创建者">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select placeholder="请选择状态" v-model="form.status">
            <el-option label="禁用" :value="0"></el-option>
            <el-option label="启用" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">清除</el-button>
          <el-button type="primary" @click="add">+新增企业</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="card2">
      <el-table :data="tableData">
        <el-table-column label="序号" width="150px">
          <!-- （当前页-1）* 每页条数 + 序号 + 1 -->
          <template
            slot-scope="scope"
          >{{(pagination.currentPage - 1) * pagination.pageSize + scope.$index+1}}</template>
        </el-table-column>
        <el-table-column label="企业编号" prop="eid"></el-table-column>
        <el-table-column label="企业名称" prop="name"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期" prop="create_time"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <span :class="{red: scope.row.status == 0}">{{scope.row.status == 1 ? '启用' : '禁用'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button
              type="text"
              @click="setStatus(scope.row.id)"
            >{{scope.row.status == 0 ? '启用' : '禁用'}}</el-button>
            <el-button type="text" @click="deleteClick(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.totalPage"
      ></el-pagination>
    </el-card>

    <addBusiness ref="addBusiness" @input="search" :mode="mode"></addBusiness>
  </div>
</template>

<script>
import { getBusinessData, updateStatus, delBusiness } from "@/api/business.js";
import addBusiness from '@/views/home/business/addBusiness.vue'
export default {
  components: {
    addBusiness
  },
  data() {
    return {
      mode: 'add',
      form: {
        eid: "",
        name: "",
        username: "",
        status: ""
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 2,
        totalPage: 10
      }
    };
  },

  created() {
    // 获取数据
    this.getData();
  },

  filters: {
    filterTime(value){
      return value.splice(' ')[1]
    }
  },

  methods: {
    // 获取企业列表数据
    getData() {
      getBusinessData({
        page: this.pagination.currentPage,
        limit: this.pagination.pageSize,
        ...this.form
      }).then(res => {
        // console.log("企业列表", res);
        this.tableData = res.data.items;
        this.pagination.totalPage = res.data.pagination.total;
      });
    },

    handleSizeChange(size) {
      // console.log("每页" + size + "条");
      this.pagination.pageSize = size
      this.pagination.currentPage = 1
      this.getData()
    },
    handleCurrentChange(page) {
      // console.log("当前页", +page);
      this.pagination.currentPage = page
      this.getData()
    },
    // 搜索
    search() {
      this.pagination.currentPage = 1
      this.getData()
    },
    // 清除
    reset() {
      this.form = {
        eid: "",
        name: "",
        username: "",
        status: ""
      }
      this.search()
    },
    // 新增
    add() {
      this.mode = "add"
      this.$refs.addBusiness.dialogFormVisible = true
      this.$refs.addBusiness.form = {
        eid: '',
        name: '',
        short_name: '',
        intro: '',
        remark: ''
      }
    },
    // 编辑
    edit(row) {
      this.mode="edit"
      this.$refs.addBusiness.dialogFormVisible = true
      // 深拷贝数据
      this.$refs.addBusiness.form = JSON.parse(JSON.stringify(row))
    },
    // 设置状态
    setStatus(id) {
      updateStatus({id}).then(() => {
        this.$message.success('企业状态修改成功')
        // 刷新数据
        this.getData()
      })
    },
    // 删除
    deleteClick(id) {
      this.$confirm("亲，确认要删除此条数据吗🤓？", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delBusiness({id}).then(() => {
          this.$message.success('企业数据删除成功')
          this.search()
        })
      }).catch(()=>{})
    }
  }
};
</script>

<style lang="less">
.business {
  .card2 {
    margin-top: 20px;
  }

  .red {
    color: #f00;
  }

  .pagination {
    text-align: center;
    margin-top: 30px;
  }
}

.spinner{
  display: none;

  .spinner-icon{
    display: none;
  }
}
</style>